<template>
  <div class="partyHistory">
    <div class="banner">
      <img
        src="@/assets/imags/PartyHistory/banner.jpg"
        style="width:90%;  border-radius: 6px 6px 6px 6px;"
        alt=""
      />
    </div>
    <main-nav-bar />
    <div class="container">
      <!-- 党的发展历程 -->
      <titles>
        <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
          The Development of the Party
        </small>
        <h1 slot="h1">
          党的发展历程
        </h1>
        <template v-slot:sectionBody>
          <div class="row section">
            <div class="col-12 col-lg-6">
              <h1>关键时间节点</h1>

              <div class="block">
                <el-timeline
                  v-for="(item, index) in tiemline"
                  :key="index"
                  :reverse="reverse"
                >
                  <div @click="gentIndex(index)">
                    <el-timeline-item
                      :timestamp="item.time | formatDate"
                      placement="top"
                      :color="index == currentIndex ? color : ''"
                    >
                      <el-card
                        class="my-card card"
                        :style="index == currentIndex ? boxShow : ''"
                      >
                        <h4 class="  my-text-overflow">{{ item.title }}</h4>
                        <p class="  my-text-overflow ">{{ item.mainStory }}</p>
                      </el-card>
                    </el-timeline-item>
                  </div>
                </el-timeline>
              </div>
            </div>
            <!-- 右侧 -->
            <div class="col-12 col-lg-6 right-img">
              <img :src="imgSrc" class="img-fluid rounded-3 hvr-bounce-in" />

              <p class="my-scroll my-transition" v-html="desc"></p>
            </div>
          </div>
        </template>
      </titles>

      <!-- 党员介绍 -->

      <titles>
        <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
          The party member to introduce
        </small>
        <h1 slot="h1">
          党员介绍
        </h1>
        <template v-slot:sectionBody>
          <div class="row pt-5 section ">
            <div v-for="(item, index) in leaders" :key="index">
              <div class="row">
                <div
                  class=" col-12 col-lg-5 mt-4"
                  :class="'order-lg-' + (index % 2)"
                >
                  <div class=" position-relative">
                    <img
                      style="height:400px;"
                      class="img-fluid rounded-2 my-transition "
                      :src="item.imgSrc"
                      alt=""
                    />

                    <div
                      class="play position-absolute  d-flex justify-content-center aligin-items-center"
                      style="border-radius:2.5rem 0 0 2.5rem; right:0;"
                    >
                      <div
                        class="circle align-self-center d-flex justify-content-center align-items-center"
                      >
                        <i
                          class="bi bi-person-lines-fill"
                          style="font-size: 2em; color: #fff; "
                        ></i>
                      </div>
                      <p class="align-self-center mx-3 my-3 ">
                        {{ item.name }}
                      </p>
                    </div>
                  </div>
                </div>
                <div
                  class="col-12 col-lg-6 mt-4"
                  :class="'order-lg-' + ((index + 1) % 2)"
                >
                  <h3 class="fw-bold mb-5">{{ item.title }}</h3>
                  <ul v-for="(item, index) in item.desc" :key="index">
                    <li style="padding: 10px;">
                      {{ item }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </template>
      </titles>

      <!-- 辉煌成就 -->
      <!-- <titles>
        <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
          The Brilliant Achievement
        </small>
        <h1 slot="h1">
          辉煌成就
        </h1>
        <template v-slot:sectionBody>
          <div class="row pt-5 section">
            <selectCar2 />
          </div>
        </template>
      </titles> -->

      <!-- 党史答题测试 -->
      <titles>
        <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
          History of the party the answer
        </small>
        <h1 slot="h1">
          党史答题小测试
        </h1>
        <template v-slot:sectionBody>
          <div class="row section">
            <el-collapse
              v-model="activeName"
              accordion
              class="postion-relative"
            >
              <el-collapse-item
                :title="'已经答对' + rightNum + '题了'"
                name="1"
              >
                <div class="refresh">
                  <span :class="{ refreshRe: isRefresh }">
                    <i
                      class="el-icon-refresh-right"
                      @click="refresh"
                      style="font-size:2em;"
                    ></i>
                  </span>
                </div>
                <div class="content">
                  <h3 class="title my-5">
                    {{ questions.content }}
                  </h3>

                  <div class="row my-5">
                    <div
                      class="options col-12 col-md-6 col-lg-3 d-flex justify-content-start align-items-center"
                      v-for="(item, index) in questions.answer"
                      :key="index"
                    >
                      <input
                        style="  opacity: 0;"
                        type="radio"
                        name="answer"
                        :id="'answer' + index"
                        @click="sure(index)"
                        :disabled="disabled"
                      />
                      <label :for="'answer' + index" style="cursor: pointer;">{{
                        item
                      }}</label>
                    </div>
                  </div>
                  <div v-show="showAnswer">
                    <div class=" answer">
                      <i v-if="right" class="bi bi-check2"></i>
                      <i v-else class="bi bi-x"></i>
                    </div>
                    <div class="row">
                      <span class="fs-5">我的答案：{{ myContent }}</span> <br />
                      <span class="fs-5">正确答案：{{ rightContent }}</span>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </template>
      </titles>

      <!-- 领导人展示 -->
<!-- 
      <titles>
        <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
          Leadership team presentation
        </small>
        <h1 slot="h1">
          领导人展示
        </h1>
        <template v-slot:sectionBody>
          <div class="row section footer">
            <div
              class="swiper-container d-none d-lg-block"
              ref="swiperContainerLG"
            >
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide "
                  v-for="(item, index) in leaders"
                  :key="index"
                  @click="getLeader(item)"
                >
                  <card>
                    <img :src="item.headPortrait" slot="img" alt="" />
                    <h5
                      class="card-title text-center fw-bold  my-transition"
                      slot="card-title"
                    >
                      {{ item.name }}
                    </h5>
                    <p
                      class="card-text text-center fw-normal  my-transition  overflow"
                      slot="card-text"
                    >
                      {{ item.title }}
                    </p>
                  </card>
                </div>
              </div>
            </div>
            <div
              class="swiper-container d-block d-lg-none"
              ref="swiperContainerMd"
            >
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide "
                  v-for="(item, index) in leaders"
                  :key="index"
                  @click="getLeader(item)"
                >
                  <card>
                    <img :src="item.headPortrait" slot="img" alt="" />
                    <h5
                      class="card-title text-center fw-bold  my-transition"
                      slot="card-title"
                    >
                      {{ item.name }}
                    </h5>
                    <p
                      class="card-text text-center fw-normal  my-transition  overflow"
                      slot="card-text"
                    >
                      {{ item.title }}
                    </p>
                  </card>
                </div>
              </div>
            </div>
          </div>
        </template>
      </titles> -->
    </div>
  </div>
</template>

<script>
import Titles from "@/components/Titles.vue";
import MainNavBar from "@/common/NavBar/MainNavBar.vue";
import formatDateTimes from "@/assets/Tools/date2.js";
import Card from "@/components/Card.vue";
import selectCar2 from "@/common/selectCar2.vue";
export default {
  components: { MainNavBar, Card, Titles, selectCar2 },
  data() {
    return {
      reverse: true,
      tiemline: [],
      currentIndex: 0,
      imgSrc: "",
      desc: "",
      color: "#ff7c5b",
      boxShow: "box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15)",
      leaders: [],
      activeName: "1", //党的历程 当前活跃状态下标
      questions: [],
      showAnswer: false, //显示回答
      trueAnswer: 1, // 正确答案的标号
      right: true, // 打钩 / 打叉 图标的显示
      rightNum: 0, // 答对题数
      disabled: false,
      isRefresh: false, // 是否刷新
      rightContent: "",
      myContent: "",
    };
  },

  mounted() {
    this.getTiemLine();
    this.getLeaders();
    this.getQuestion();
  },
  filters: {
    // 时间格式
    formatDate(val) {
      return formatDateTimes.formatDateTime2(val);
    },
  },
  methods: {
    // 获取党的历程
    async getTiemLine() {
      const data = await this.$http.get("/partyHistory/timeline");

      if (data.code == 200) {
        this.tiemline = data.data;
        this.imgSrc = this.tiemline[this.currentIndex].imgSrc;
        this.desc = this.tiemline[this.currentIndex].desc;
      }
      console.log(data);

      this.$nextTick(() => {
        this.swperlg();
        this.swpermd();
      });
    },
    // 获取领导人信息
    async getLeaders() {
      const data = await this.$http("/partyHistory/leader");

      if (data.code == 200) {
        this.leaders = data.data;
      }

      this.$nextTick(() => {
        this.swperlg();
        this.swpermd();
      });
    },

    gentIndex(index) {
      this.currentIndex = index;
      this.getTiemLine();
    },
    // pc轮播
    swperlg() {
      var swiper = new Swiper(this.$refs.swiperContainerLG, {
        slidesPerView: 3,

        spaceBetween: 30,
        loop: true,
        freeMode: true,

        observer: true,
        observeParents: true,
      });

      swiper.el.onmouseover = function() {
        //鼠标放上暂停轮播
        swiper.autoplay.stop();
      };

      swiper.el.onmouseleave = function() {
        swiper.autoplay.start();
      };
    },
    //移动端轮播
    swpermd() {
      var swiper = new Swiper(this.$refs.swiperContainerMd, {
        slidesPerView: 1,
        freeMode: true,
        loop: true,

        observer: true,
        observeParents: true,
      });

      swiper.el.onmouseover = function() {
        //鼠标放上暂停轮播
        swiper.autoplay.stop();
      };

      swiper.el.onmouseleave = function() {
        swiper.autoplay.start();
      };
    },
    // 对应跳转
    getLeader(item) {
      console.log(item);
    },
    // 获取答题题目

    async getQuestion() {
      const data = await this.$http.get("/partyHistory/randomQuestion");
      if (data.code == 200) {
        this.questions = data.data;
        this.trueAnswer = data.data.right;
      }
    },
    //答题刷新
    // 需要返回正确答案的下标 通过下标判断回答是否正确
    refresh() {
      this.disabled = false;
      this.showAnswer = false;
      this.isRefresh = !this.isRefresh; //点击时旋转

      setTimeout(() => {
        //获取数据后停止旋转
        this.isRefresh = !this.isRefresh;
        this.getQuestion();
      }, 1000);
    },
    //
    sure(index) {
      this.showAnswer = true;
      this.rightContent = this.questions.answer[this.trueAnswer];
      this.myContent = this.questions.answer[index];
      if (index == this.trueAnswer) {
        this.right = true; // 改变图标
        this.rightNum++; //答对题数加一
        this.openTrue();
      } else {
        this.openFalse();
        this.right = false;
      }
      this.disabled = true; //无论对错只能答一次表单禁用
    },
    openTrue() {
      this.$notify.success({
        title: "恭喜 答对题数+1",
        dangerouslyUseHTMLString: true,
        message: "无敌是多么寂寞!" + `<h5>答对题数 ${this.rightNum} </h5>`,
        showClose: false,
        offset: 100,
        type: "success",
      });
    },
    openFalse() {
      this.$notify.error({
        title: "答错了哟",
        message: "再答一道吧！",
        showClose: false,
        offset: 100,
      });
    },
  },
  /*  swiper 轮播出现问题 https://www.jianshu.com/p/f6d31e2732e0
   axios 执行get指令是异步请求 即在axios请求数据过程中 initSwiper运行时要绑定的部分元素节点还没有创建成功
导致swiper插件中部分指定并没有绑定到指定元素节点上导致swiper轮播出现异常

   在jQuery中 当得到数据时，是边加载边更新Dom但是在Vue中 当得到数据时， 而是全部加载完以后再更新Dom
即在这个问题中， initSwiper运行完之后，axios请求到的数据才加载完并更新Dom在一开始容器中的数据并没有渲染
此时swiperOption配置的loop: true不生效而即使swiper更新 而loop属性却并不会重新加载 即loop为false
  */
};
</script>

<style lang="less" scoped>
:root {
  --text-color: #0a1b4f;
  --p-color: #7f8897;
  --title-color: #4bb0f7;
  --active-color: #4db1f7;
}
.partyHistory {
  margin-top: 6.25rem;
  overflow: hidden;

  ul {
    li {
      list-style: none;
    }
  }
  .banner {
    width: 100%;
    height: 50vh;

    img {
      width: 100%;
      height: 100%;
    }
  }
  h1 {
    margin-top: 1.875rem;
  }
}
// 左侧样式
.block {
  max-height: 34.0625rem;
  overflow: scroll;
}
.block::-webkit-scrollbar {
  width: 0 !important;
}
.block {
  overflow: -moz-scrollbars-none;
}
.card {
  margin-right: 10px;
}
//右侧样式
.right-img {
  img {
    max-height: 14.375rem;
    transition: all 0.5s;
  }
  margin-top: 1.875rem;
  p {
    margin-top: 1.875rem;
    padding: 1.25rem;
    max-height: 18rem;
    overflow: scroll;
  }
}
//领导人展示
.swiper-container {
  width: 100%;

  margin-left: auto;
  margin-right: auto;
  height: 50vh;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
  .card {
    height: auto !important;
    // border: 1px solid #409eff !important;
    box-shadow: 0 4px 9px 6px rgba(116, 146, 245, 0.15);
  }
}

//
.row ul li {
  color: var(--p-color);
  font-weight: 700;
  position: relative;
  margin-bottom: 1rem;
}

.row .section-divider,
.title .section-divider {
  position: relative;
  width: 5.625rem;
  height: 0.3125rem;
  background-color: #d8eefe;
  margin-top: 1.25rem;
}

.section-divider:after {
  content: "";
  position: absolute;
  width: 0.5625rem;
  height: 0.5625rem;
  background-color: var(--title-color);
  left: 0;
  top: -0.125rem;
  border-radius: 50%;
  animation: move 3s linear infinite;
}

@keyframes move {
  100% {
    left: 100%;
  }
}

.row .play {
  width: 15rem;
  height: 5rem;
  bottom: 10%;
  background-color: #fff;
  border-radius: 0 2.5rem 2.5rem 0;
}

.row .circle {
  width: 3.75rem;
  height: 3.75rem;
  margin-left: -2.6875rem;
  border-radius: 50%;
  background-color: var(--active-color);
}

//答题
.refresh,
.answer {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);

  cursor: pointer;
}
label {
  font-size: 1.5em !important;
}
.refresh > span {
  width: 26px;
  height: 26px;
  transition: 0.5s;
  position: absolute;
}
.bi-arrow-repeat {
  top: 50px;

  font-size: 2.5em;
}
.bi-x {
  font-weight: 900;
  color: #f56c6c;
  font-size: 4em;
}
.bi-check2 {
  font-weight: 900;
  font-size: 4em;
  color: #67c23a;
}
.content {
  padding: 2.8125rem;
}
.answer {
  left: 85%;
}
.refreshRe {
  animation: rotate 1.2s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);

    -moz-transform: rotate(0deg); /* Firefox */
  }
  100% {
    transform: rotate(360deg);

    -moz-transform: rotate(360deg); /* Firefox */
  }
}
</style>
